import React from 'react';

export default class extends React.Component{
  constructor(props){
    super();
    this.state={
      active:props.active,
      Change:props.Change
    }
  }
  UNSAFE_componentWillReceiveProps(props){
    this.setState({
      active:props.active,
    })
  }
  Triggle(){
    let active=this.state.active;
    if(active===undefined){
      active=false;
    }
    this.setState({
      active:!active
    },()=>{
      if(this.props.Change!==undefined ){
          this.props.Change();
      }
  });
  }
  render(){
    return(
      <svg xmlns="http://www.w3.org/2000/svg" onClick={e=>this.Triggle(e)} fill={this.state.active?"#5393eb":"#999"} preserveAspectRatio="xMidYMid" width="45" height="45.031" viewBox="0 0 45 45.031">
        <path d="M40.781,45.018 L4.218,45.018 C1.888,45.018 -0.000,43.126 -0.000,40.799 L-0.000,16.449 C-0.000,14.677 0.648,12.062 1.477,10.493 L5.319,3.245 C6.278,1.434 8.641,0.014 10.693,0.014 L34.337,0.014 C36.392,0.014 38.745,1.443 39.697,3.267 L43.542,10.666 C44.360,12.235 44.999,14.853 44.999,16.622 L44.999,40.799 C44.999,43.126 43.108,45.018 40.781,45.018 ZM41.048,11.963 L37.202,4.566 C36.727,3.657 35.361,2.827 34.337,2.827 L10.693,2.827 C9.662,2.827 8.287,3.657 7.805,4.563 L3.965,11.809 C3.760,12.196 3.572,12.707 3.402,13.248 L41.555,13.249 C41.399,12.765 41.229,12.315 41.048,11.963 ZM42.188,16.622 C42.188,16.457 42.158,16.248 42.141,16.061 L2.845,16.061 C2.833,16.188 2.812,16.336 2.812,16.449 L2.812,40.799 C2.812,41.574 3.441,42.205 4.218,42.205 L40.781,42.205 C41.558,42.205 42.188,41.574 42.188,40.799 L42.188,16.622 ZM28.368,34.286 C28.209,34.454 28.017,34.564 27.811,34.635 C27.626,34.718 27.435,34.767 27.240,34.767 C26.879,34.767 26.523,34.630 26.248,34.355 L22.391,30.509 C21.842,29.960 21.842,29.070 22.391,28.521 C22.941,27.971 23.831,27.971 24.380,28.521 L27.240,31.375 L34.324,23.807 C34.856,23.241 35.745,23.214 36.313,23.741 C36.878,24.274 36.909,25.164 36.378,25.730 L28.368,34.286 ZM18.307,28.675 L9.865,28.675 C9.091,28.675 8.460,28.045 8.460,27.268 C8.460,26.491 9.091,25.862 9.865,25.862 L18.307,25.862 C19.084,25.862 19.713,26.491 19.713,27.268 C19.713,28.045 19.084,28.675 18.307,28.675 ZM9.820,31.861 L14.038,31.861 C14.815,31.861 15.445,32.493 15.445,33.267 C15.445,34.047 14.815,34.674 14.038,34.674 L9.820,34.674 C9.043,34.674 8.413,34.047 8.413,33.267 C8.413,32.493 9.043,31.861 9.820,31.861 Z" class="cls-1"/>
      </svg>
    );
  }
}